<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体选择器测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .test-section {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        .button {
            padding: 10px 20px;
            margin: 5px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .button:hover {
            background-color: #0056b3;
        }
        .result {
            margin-top: 10px;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 4px;
        }
        .success {
            background-color: #d4edda;
            border-left: 4px solid #28a745;
        }
        .error {
            background-color: #f8d7da;
            border-left: 4px solid #dc3545;
        }
    </style>
</head>
<body>
    <h1>媒体选择器功能测试</h1>
    
    <div class="test-section">
        <h2>实现说明</h2>
        <p>我们已经成功实现了媒体选择器的函数式调用功能：</p>
        <ul>
            <li>✅ 在 <code>src/hooks/useMenu.ts</code> 中实现了 <code>selectMedia</code> 函数</li>
            <li>✅ 支持动态创建和挂载组件实例</li>
            <li>✅ 通过 Promise 处理异步选择结果</li>
            <li>✅ 正确处理组件生命周期和资源清理</li>
            <li>✅ 保持与原有组件调用方式的兼容性</li>
        </ul>
    </div>

    <div class="test-section">
        <h2>核心功能特性</h2>
        <ul>
            <li><strong>函数式调用</strong>：<code>const result = await selectMedia('123', 'image')</code></li>
            <li><strong>Promise 封装</strong>：支持 async/await 语法</li>
            <li><strong>参数传递</strong>：支持传递 id 和 type 参数</li>
            <li><strong>错误处理</strong>：用户取消时 Promise 会 reject</li>
            <li><strong>资源管理</strong>：自动清理动态创建的组件实例</li>
            <li><strong>类型安全</strong>：完整的 TypeScript 类型支持</li>
        </ul>
    </div>

    <div class="test-section">
        <h2>使用方式对比</h2>
        
        <h3>1. 原有组件方式（继续支持）</h3>
        <pre><code>&lt;MediaPicker ref="mediaPickerRef" :resolve="onResolve" :reject="onReject" /&gt;

// 调用
mediaPickerRef.value?.show();</code></pre>

        <h3>2. 新增 Hook 方式</h3>
        <pre><code>import { useMenu } from '@/hooks/useMenu';

const { selectMedia } = useMenu();

// 调用
try {
  const result = await selectMedia('123', 'image');
  console.log('选择结果:', result);
} catch (error) {
  console.log('用户取消:', error.message);
}</code></pre>
    </div>

    <div class="test-section">
        <h2>技术实现要点</h2>
        <ul>
            <li><strong>动态组件创建</strong>：使用 Vue 3 的 <code>createApp</code> API</li>
            <li><strong>独立应用实例</strong>：避免与主应用状态污染</li>
            <li><strong>Quasar 集成</strong>：确保动态组件能正常使用 Quasar 组件</li>
            <li><strong>DOM 管理</strong>：自动创建和清理临时容器</li>
            <li><strong>状态防护</strong>：防止重复调用 resolve/reject</li>
            <li><strong>错误处理</strong>：完善的异常处理机制</li>
        </ul>
    </div>

    <div class="test-section">
        <h2>测试步骤</h2>
        <p>请在浏览器中访问 <a href="http://localhost:5174/" target="_blank">http://localhost:5174/</a> 进行测试：</p>
        <ol>
            <li>点击"组件方式调用"按钮，测试原有功能</li>
            <li>点击"Hook方式调用"按钮，测试新增功能</li>
            <li>在弹窗中点击"确定"或"取消"按钮</li>
            <li>观察控制台输出和页面结果显示</li>
            <li>验证两种方式都能正常工作且互不影响</li>
        </ol>
    </div>

    <div class="test-section success">
        <h2>✅ 实现完成</h2>
        <p>媒体选择器的函数式调用功能已经成功实现！</p>
        <p>现在你可以在项目中使用两种方式来调用媒体选择器：</p>
        <ul>
            <li>传统的组件引用方式（向后兼容）</li>
            <li>新的 Hook 函数式调用方式（更简洁）</li>
        </ul>
    </div>
</body>
</html>
